<template>
  <div class="paycostDetail" id="paycostDetail">
    <p style="font-size: 17px;height: 48px;line-height: 48px;">学生信息</p>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
      <el-table-column prop="notice_number" label="学号" width="180" align="center"></el-table-column>
      <el-table-column prop="grade" label="年级" width="180" align="center"></el-table-column>
      <el-table-column prop="courtyard_department" label="院系" align="center"></el-table-column>
      <el-table-column prop="professional" label="专业" align="center"></el-table-column>
      <el-table-column prop="card_number" label="一卡通号码" align="center"></el-table-column>
      <el-table-column prop="other_phone" label="原始手机号码" align="center"></el-table-column>
      <el-table-column prop="" label="学校手机号码" align="center"></el-table-column>
      <el-table-column  label="是否退学" align="center">
           <template slot-scope="scope">
                {{scope.row.is_out_school==1?'是':'否'}}
            </template>
      </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" min-width="118px">
            <template slot-scope="scope">
                <el-button size="mini" plain @click="handleEditStudent(scope.row)" style="color: #000000;">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <p style="font-size: 17px;height: 48px;line-height: 48px;">收费信息</p>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="amount_payable" label="应收" align="center"></el-table-column>
      <el-table-column prop="amount_real" label="实收" align="center"></el-table-column>
    </el-table>
    <el-table :data="tableData" border style="width: 100%">
       <el-table-column prop="wechat" label="微信" align="center">
          <template slot-scope="scope">
              <el-input v-model="scope.row.wechat" placeholder="微信" align="center" @change="changeWechar"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="alipay" label="支付宝" align="center">
          <template slot-scope="scope">
              <el-input v-model="scope.row.alipay" placeholder="支付宝" align="center" @change="changeAlipay"></el-input>
          </template>
        </el-table-column>
         <el-table-column prop="unionpay" label="银联" align="center">
           <template slot-scope="scope">
               <el-input v-model="scope.row.unionpay" placeholder="银联" align="center" @change="changeUnionpay"></el-input>
           </template>
         </el-table-column>
          <el-table-column prop="cash" label="现金" align="center">
            <template slot-scope="scope">
                <el-input v-model="scope.row.cash" placeholder="现金" align="center"  @change="changeCash()"></el-input>
            </template>
          </el-table-column>
     </el-table>
    <p style="font-size: 17px;height: 48px;line-height: 48px;">收费项目详情</p>
   <el-table :data="chargeTableData" border style="width: 100%">
      <el-table-column prop="charge_name" label="收费项目"  align="center"></el-table-column>
      <el-table-column prop="money" label="收费金额" align="center">
        <template slot-scope="scope">
            <el-input v-model="scope.row.money" placeholder="收费金额" align="center" @change="placeOne(scope)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="收费时间" align="center"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDetail">保存</el-button>
        <el-button @click="back">返回</el-button>
    </div>
    <el-dialog :title="formEditTitle" :visible.sync="dialogFormVisible" >

        <el-form :model="form" :disabled="formEditDisabled">
            <el-form-item label="专业" :label-width="formLabelWidth" >
                <el-input v-model="form.professional" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="院系" :label-width="formLabelWidth" >
                <el-input v-model="form.courtyard_department" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="年级" :label-width="formLabelWidth" >
                <el-input v-model="form.grade" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="一卡通号码" :label-width="formLabelWidth" >
                <el-input v-model="form.card_number" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否退学" :label-width="formLabelWidth" >
                <el-select v-model="form.is_out_school" placeholder="请选择"  style="width:100%;">
                    <el-option label="是" :value="1"></el-option>
                    <el-option label="否" :value="2"></el-option>
                  </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitDetailStudent">保存</el-button>
            <el-button @click="dialogFormVisible = false">返回</el-button>
        </div>
    </el-dialog>


  </div>
</template>

<script>
   import apis from '../apis/apis';
  export default {
    data() {
      return {
        value:'',
        pay_type: {
          0: '银联',
          1: '支付宝',
          2: '微信',
          3: '现金'
        },
        formEditTitle:'缴费信息',
        formEditDisabled:false,
        dialogFormVisible:false,
        formLabelWidth: '120px',
        tableData: [],
        chargeTableData: [],
        getPaycostDetail: {},
        form:{
          professional: '',
          courtyard_department:'',
          grade:'',
          card_number:'',
          is_out_school:'',
          },
      }
    },
    created() {

    },
    beforeMount() {
      var self = this;
      self.getTableData();
    },
    methods: {
      // 返回按钮
      back(){
         var self=this;
         console.log('11111')
         self.$router.push({
           path: '/payRecode',
         })
      },
      /* 获得表格数据 */
      getTableData() {

         this.tableData=[this.$route.query.data];
      
         let list=this.$route.query.data;
         this.chargeTableData=list.pay_items;
      },
      handleEditStudent(data){
        this.form=data;
        this.dialogFormVisible=true;
        this.$nextTick(()=>{
              this.formEditTitle = '学生信息-编辑';
                this.formEditDisabled = false;
        })
        // this.value=1
      },
      handleEditPayCost(){
        this.dialogFormVisiblePayCost=true;
        this.$nextTick(()=>{
              this.formEditTitlePayCost = '收费信息-编辑';
                this.formEditDisabledPayCost = false;
        })
        },
        placeOne(scope){

        },
          handleEditPCproject(){
            this.dialogFormVisiblePCproject=true;
            this.$nextTick(()=>{
                  this.formEditTitlePCproject = '收费项目-编辑';
                    this.formEditDisabledPCproject = false;
            })
            },
            submitDetail(){

              let charge={
                amount_real:this.tableData[0].amount_real,
                charge_id:this.tableData[0].charge_id,
                wechat:this.tableData[0].wechat,
                alipay:this.tableData[0].alipay,
                unionpay:this.tableData[0].unionpay,
                cash:this.tableData[0].cash
              };
              let numCost=Number(charge.wechat)+Number(charge.alipay)+Number(charge.unionpay)+Number(charge.cash);
              let pay_itmes=this.chargeTableData
                if(numCost>Number(charge.amount_real)){
                   charge.amount_real=numCost
                }else if(numCost<Number(charge.amount_real)){
                  charge.amount_real=numCost
                }
              apis.contApi.outEdit('',charge,pay_itmes).then((data)=>{
                      if(data.data.code==0){
                           this.$message('修改成功');
                            this.$router.push({
                              path: '/payRecode',
                              })
                      }else{
                        this.$message('应收款与 各项目实际收款不符');
                      }
              })

            },
      /* 学生保存 */
      submitDetailStudent(){

       this.form={
         students_id:this.form.students_id,
         professional: this.form.professional,
         courtyard_department:this.form.courtyard_department,
         other_phone:this.form.other_phone,
         grade:this.form.grade,
         card_number:this.form.card_number,
         is_out_school:this.form.is_out_school,
       }
        apis.contApi.outEdit(this.form,'','').then((data)=>{
           if(data.data.code == 0) {
             this.dialogFormVisible=false;
             this.formEditDisabled = true;
              this.$message('更改成功');
          }
        })

      },
      changeWechar(value){
        this.tableData.wechat=value
      },
      changeAlipay(value){
        this.tableData.alipay=value;
      },
      changeUnionpay(value){
        this.tableData.unionpa=value;
      },
      changeCash(value){
        this.tableData.cash=value;
      },
    }
  }
</script>

<style>
  .dialog-footer{
    padding: 10px;
    text-align: center;
    }
    .el-input__inner{
      text-align: center;
    }
</style>
